<template>
<div class="revenue-excel">
  <div class="table-title">
    <el-date-picker
      v-model="dateTime"
      type="daterange"
      :editable="false"
      :clearable="false"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="getDate">
    </el-date-picker>
    <el-button type="primary" @click="initList" data-auth="store_report_inventory">查询</el-button>
  </div>
  <div class="table-main" v-if="!!listData" id="chart" :style="`min-height:${chartHeight}px`">

  </div>
</div>
</template>
<script>
  export default {
    data() {
      return {
        dateTime:[],
        searchData:{
          StartDate:'',
          EndDate:''
        },
        chartHeight:800,
        listData:''
      }
    },
    methods: {
      getDate(date){
        this.searchData.StartDate=this.$format('yyyy-MM-dd',new Date(date[0]))
        this.searchData.EndDate=this.$format('yyyy-MM-dd',new Date(date[1]))
      },
      initList(){
        this.getList();
      },
      getList(){
        this.$ajax.GetRoomCategoryInventory(this.searchData).then(res=>{
          if(res.Success){
            this.listData=res.Data.slice(1,res.Data.length-1);
            this.chartHeight=this.listData.length*80;
            this.$nextTick(()=>{
              let mychart=echarts.init(document.getElementById('chart'));
              const num=res.Data[0].TotalCount-res.Data[0].LeftCount;
              let option = {
                title:{
                  left:40,
                  text:`${res.Data[0].CategoryName}出租率:${res.Data[0].Percent}%(${num}间夜)`
                },
                color: ['#cdebd0'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow',
                        shadowStyle:{
                          opacity:0
                        }
                    },
                    formatter:  function (value) {
                      const num=value[0].data.TotalCount-value[0].data.LeftCount;
                      return `${value[0].axisValue}出租率:${value[0].data.value}%(${num}间夜)`
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'value',
                        axisLabel: {
                            formatter:  function (value) {
                                return `${value}%`;
                            }
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'category',
                        data : this.listData.map(item=>{return item.CategoryName}).reverse(),
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                          formatter: function (value) {
                              return '';
                          }
                        }
                    }
                ],
                series :  {
                    name:'出租率',
                    type:'bar',
                    barWidth: '60%',
                    label: {
                        normal: {
                            position: [10,'50%'],
                            align:'left',
                            verticalAlign:'middle',
                            color:'#000',
                            fontSize:'18px',
                            show: true,
                            formatter: function (value) {
                                const num=value.data.TotalCount-value.data.LeftCount;
                                return `${value.name}${value.seriesName}:${value.value}%(${num}间夜)`
                            }
                        }
                    },
                    data:this.listData.map(item=>{
                      return {
                        value:item.Percent,
                        TotalCount:item.TotalCount,
                        LeftCount:item.LeftCount
                      }
                    }).reverse()
                }
              };
              mychart.setOption(option);
            })
          }
        })
      },
      handleExcel(){
        let data=_.cloneDeep(this.searchData);
        data=this.$urlEncode(data);
        window.open(this.$api.CreatePaymentToExportExcel+'?'+data);
			},
    },
    created(){
      this.dateTime=[new Date(new Date().getTime() - 3600 * 1000 * 24),new Date(new Date().getTime() - 3600 * 1000 * 24)];
      this.getDate(this.dateTime);
      this.getList();
    }
  }
</script>
